<template>
  <!-- <div id="app" @mousemove="appmousemove" @mouseover="appmousemove"> -->
  <div id="app">
    <template v-if="!launchdomstatus">
      <router-view />
      <div class="bottomnav" v-show="bottomnavifshow">
        <router-link :to="{ name: 'index' }" replace>
          <div class="default">
            <img src="@/assets/imgNews/navs/index.png" alt="" srcset="" />
            <span>Wealth</span>
          </div>
          <div class="active homeicon">
            <img src="@/assets/imgNews/navs/indexactive.png" alt="" srcset="" />
            <span>Wealth</span>
          </div>
        </router-link>
        <router-link :to="{ name: 'fissionindex' }" replace>
          <div class="default">
            <img src="@/assets/imgNews/navs/fission.png" alt="" srcset="" />
            <span>Video</span>
          </div>
          <div class="active">
            <img
              src="@/assets/imgNews/navs/fissionactive.png"
              alt=""
              srcset=""
            />
            <span>Video</span>
          </div>
        </router-link>
        <router-link :to="{ name: 'purseindex' }" replace>
          <div class="default">
            <img src="@/assets/imgNews/navs/purse.png" alt="" srcset="" />
            <span>Me</span>
          </div>
          <div class="active">
            <img src="@/assets/imgNews/navs/purseactive.png" alt="" srcset="" />
            <span>Me</span>
          </div>
        </router-link>
      </div>
    </template>
    <template v-if="launchdomstatus">
      <launchSwiper @gotoIndex="gotoIndexFn"></launchSwiper>
    </template>
    <template v-if="launchAddIndexPageStatus">
      <div class="launchdom">
        <img src="@/assets/imgNews/launch.png" />
        <p>Ugo</p>
        <span>Live only for value</span>
      </div>
    </template>
  </div>
</template>
<script>
import launchSwiper from "./components/launchSwiper";

import { remset } from "./utils/remset.js";
export default {
  components: {
    launchSwiper
  },
  data() {
    return {
      // 响应式类别
      showtype: "normal",
      // 底部主导航是否显示，默认为显示
      bottomnavifshow: false,

      lastTime: "",
      currentTime: "",
      timeOut: 29 * 60 * 1000,
      setIntervaltestTime: "", //检测操作状态的计时器

      launch_time: "", //启动时刻的时间
      launchdomstatus: true,

      launchAddIndexPageStatus: true
    };
  },
  computed: {},
  methods: {
    // 关闭浮层进入首页
    gotoIndexFn: function() {
      this.launchdomstatus = false;
      this.$router.push({ name: "index" });
    },
    // 超时检测
    testTime: function() {
      // console.log('超时检测方法执行');
      let that = this;
      that.currentTime = new Date().getTime(); //更新当前时间
      if (that.currentTime - that.lastTime > that.timeOut) {
        //判断是否超时
        // console.log("超时");
        this.logout();
      }
    },
    appmousemove: function() {
      this.lastTime = new Date().getTime();
    },
    // 退出登录
    logout() {
      this.$store.commit("resetuserdata");
      this.$router.push({ path: "/login" ,replace:true});
    },
    showtypeset: function() {
      let w = document.documentElement.offsetWidth || document.body.offsetWidth;
      // console.log(w);
      if (w >= 1190) {
        this.showtype = "normal";
        // console.log('大于等于1190的正常屏幕===参考1190设计稿')
      } else if (990 <= w && w < 1190) {
        this.showtype = "middle";
        // console.log('大于等于990小于1190的中等屏幕===参考990设计稿')
      } else if (w < 990) {
        this.showtype = "small";
        // console.log('小于990的小屏幕 用rem适配移动端===参考移动端设计稿')
      }
    }
  },
  created() {
    this.launch_time = new Date().getTime();
    // console.log(this.launch_time);
  },
  mounted() {
    remset(720);
    let that = this;
    this.showtypeset();
    window.onresize = () => {
      that.showtypeset();
      remset(720);
    };

    // 加载完成后添加session保存启动状态
    // console.log(localStorage.getItem("createdtime"));

    let setcreatedtime = Number(
      localStorage.getItem("createdtime") === null
        ? 0
        : localStorage.getItem("createdtime")
    );
    // console.log(setcreatedtime);

    localStorage.setItem("createdtime", setcreatedtime + 1);
  },
  watch: {
    $route(to, from) {
      // console.log(to,+'-----',from);
      if (to.meta.navstatus == true) {
        this.bottomnavifshow = true;
      } else {
        this.bottomnavifshow = false;
      }
    }
  },
  // beforeCreate() {
  // }, //生命周期 - 创建之前
  beforeMount() {
    let zs = this;
    if (localStorage.getItem("createdtime") > 0) {
      // zs.launchdomstatus = false;//使用显示swiper
    } else {
      // setTimeout(() => {
      //   zs.launchdomstatus = false;
      // }, 4000 - (new Date().getTime() - zs.launch_time)); //TODO:默认展示启动页两秒时间
    }

    setTimeout(() => {
      this.launchAddIndexPageStatus = false;
    }, 3500);
    if (window.StepSDK) {
      StepSDK.getStep();
    }
    window.setStepValue = step => {
      console.log("app.vue:" + step);
      zs.$store.commit("stepNumberChange", step);
    };
  }
  //生命周期 - 挂载之前
  // beforeUpdate() {}, //生命周期 - 更新之前
  // updated() {}, //生命周期 - 更新之后
  // beforeDestroy() {}, //生命周期 - 销毁之前
  // destroyed() {}, //生命周期 - 销毁完成
  // activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./assets/css/reset.css");
@import "./assets/css/common.less";
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 7.2rem;
  min-height: 100vh;
  margin: 0 auto;
  box-shadow: 0 0 5px #ccc;
  //background:linear-gradient(135deg, #040217, #600E3F,#000002);
  .bottomnav {
    position: fixed;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    height: 1rem;
    width: 7.2rem;
    background-color: @bgcolor;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 0 0 1px @bgcolor;
    a {
      position: relative;
      width: 1.1rem;
      .default,
      .active {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        img {
          height: 0.48rem;
          width: 0.48rem;
          display: block;
          margin: 0 auto 0.08rem;
          object-fit: cover;
        }
        span {
          font-size: 0.2rem;
          font-weight: bold;
          //color: rgba(245, 245, 245, 1);
          color: rgba(51, 51, 51, 1);
          line-height: 0.28rem;
          display: block;
          text-align: center;
        }
      }
      .active {
        display: none;
        span {
          color: rgba(252, 234, 16, 1);
        }
      }

      &.router-link-exact-active {
        .default {
          display: none;
        }
        .active {
          display: block;
        }
      }
    }
  }
  .launchdom {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10001;
    background: rgba(221, 245, 255, 1);
    img {
      width: 3.06rem;
      height: auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    p,
    span {
      position: fixed;
      left: 0;
      width: 100%;
      text-align: center;
      color: rgba(51, 51, 51, 1);
    }
    p {
      font-size: 0.6rem;
      color: rgba(51, 51, 51, 1);
      font-weight: bold;
      line-height: 0.84rem;
      bottom: 12.8%;
      letter-spacing: 0.3em;
    }
    span {
      font-size: 0.36rem;
      color: rgba(51, 51, 51, 1);
      line-height: 0.5rem;
      bottom: 9.72%;
      letter-spacing: 0.35em;
    }
  }
}
</style>
<style lang="less" scoped>
// @import './assets/css/common.less';
</style>
